<template>
  <el-card class="order-warning">
    <div slot="header" class="clearfix">
      <!-- 面包导航 -->
      <my-bread>退款维权</my-bread>
    </div>

    <!-- 筛选区 -->
    <el-form ref="form" :model="orderForm" label-width="80px">
      <el-form-item label="订单搜索">
        <el-select v-model="orderForm.number" placeholder="订单号" style="display:inline-block">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>

        <el-input v-model="orderForm.keyHot" placeholder="店铺名称/电话/姓名" style="display:inline-block; width:200px;margin:0 20px 0 20px;"></el-input>

        <el-button type="primary">筛选</el-button>

        <span class="colorBlue" style="margin:0 30px 0 20px;">重置筛选条件</span>

      </el-form-item>
    </el-form>

    <!-- 按钮点击区域 -->
    <div class="clearfix" style="margin:30px 0;">
      <el-button-group class="fr">
        <el-button :type="isRecent?'primary':''" @click="change">按最近申请排序</el-button>
        <el-button :type="!isRecent?'primary':''" @click="change">按临近超时排序</el-button>
      </el-button-group>
    </div>

    <!-- table展示 -->
      <el-table
        :data="tableData1"
          :header-cell-style="{background:'rgba(250,250,250,1)',color:'#606266',fontWeight: 700,fontSize:'18px'}"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
              <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                border
                row-key="id"
                >
                <el-table-column
                  prop="name"
                  label="商品"
                  width="180">
                  <template slot-scope="scope">
                      <p class="ellipsis2">这是商品名称杀了撒 是撒撒大所多sad12132131313</p>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="address1"
                  label="发货状态">
                </el-table-column>

                <el-table-column
                  prop="address2"
                  label="订单金额(元)">
                </el-table-column>

                <el-table-column
                  prop="address3"
                  label="退款金额">
                </el-table-column>

                <el-table-column
                  prop="address4"
                  label="申请时间">
                </el-table-column>

                <el-table-column
                  prop="address5"
                  label="超时时间">
                </el-table-column>

                <el-table-column
                  prop="address6"
                  label="退款状态">
                </el-table-column>

                <el-table-column
                  prop="address7"
                  label="备注">
                  <template slot-scope="scope">
                    <el-button
                      type="text"

                      @click="goActivistDetail"
                    >
                      详情
                    </el-button>
                  </template>
                </el-table-column>

              </el-table>
          </template>
        </el-table-column>

        <el-table-column
          label="商家"
          prop="idname">
        </el-table-column>
        <el-table-column
          label="退款编号"
          prop="name">
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="name1">
        </el-table-column>
        <el-table-column
          label="类型"
          prop="name12">
        </el-table-column>
        <el-table-column
          label="商家电话"
          prop="desc">
        </el-table-column>
      </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'OrderActivist',
  data () {
    return {
      // 筛选区
      orderForm: {
        number: null,
        keyHot: null

      },
      isRecent: true,

      // 假数据
      tableData: [
        {
          id: 1,
          name: '商品1',
          address1: '上海市8 1弄1212',
          address2: ' 1518 121弄',
          address3: ' 151上海市普121弄',
          address4: ' 1518 1212弄',
          address5: '上海市1212普弄',
          address6: '江路 1511218 弄',
          address7: '上海市1212普陀区 弄'
        }, {
          id: 4,
          name: '王小虎',
          address1: '上海市8 弄',
          address2: ' 1518 弄',
          address3: ' 151上海市普弄',
          address4: ' 1518 弄',
          address5: '上海市普弄',
          address6: '江路 1518 弄',
          address7: '上海市普陀区 弄'
        }],

      tableData1: [{
        id: 77,
        idname: '袁辉超时',
        name: '1000000001641',
        name1: '2019-08-23 23：23',
        name12: '仅退款',
        desc: '214342342'
      }]
    }
  },
  methods: {
    // 切换按钮
    change () {
      this.isRecent = !this.isRecent
    },

    // 去退款详情页
    goActivistDetail () {
      this.$router.push(`/order/activist/detail/${1}`)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
